<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>stomp</title>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            open();
        })

        var stompClient = null;
        // 向服务器发起websocket连接并发送CONNECT帧
        function open() {
            // 建立连接对象（还未发起连接）
            var socket = new SockJS("http://localhost:80/webSocketServer");

            // 获取 STOMP 子协议的客户端对象
            stompClient = Stomp.over(socket);
            stompClient.connect(
                {
                    name: "stone"
                },
                function connectCallback(frame) {
                    // 连接成功时（服务器响应 CONNECTED 帧）的回调方法


                    stompClient.subscribe('/topic/subscribeTest1',function (response) {
                        setMessageInnerHTML("已成功订阅/topic/subscribeTest1");
                        var returnData = JSON.parse(response.body);
                        setMessageInnerHTML("/app/subscribeTest1 你接收到的消息为:" + returnData.message);
                    });

                    stompClient.subscribe('/user/queue/message',function (response) {
                        var returnData = JSON.parse(response.body);
                        setMessageInnerHTML("/user/message 你接收到的消息为:" + returnData.message);
                    });
                    setMessageInnerHTML("连接成功");
                },
                function errorCallBack(error) {
                    // 连接失败时（服务器响应 ERROR 帧）的回调方法
                    setMessageInnerHTML("连接失败");
                }
            );

        }


        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            var messageJson = JSON.stringify({"name": message});
            stompClient.send("/app/sendTest", {}, messageJson);
            setMessageInnerHTML("/app/sendTest 你发送的消息:" + message);
        }

        //订阅消息
        function subscribe1() {
            stompClient.subscribe('/topic/subscribeTest1', function (response) {

                setMessageInnerHTML("已成功订阅/topic/subscribeTest");
                var returnData = JSON.parse(response.body);
                setMessageInnerHTML("/topic/subscribeTest 你接收到的消息为:" + returnData.message);
            });
        }

        //订阅消息
        function subscribe2() {
            stompClient.subscribe('/app/init/4', function (response) {
                setMessageInnerHTML("已成功订阅/topic/subscribeTest2");
                var returnData = JSON.parse(response.body);
                setMessageInnerHTML("/topic/subscribeTest2 你接收到的消息为:" + returnData.message);
            });
        }

        function toStone() {
            var name = $('#text2').val();
            var messageJson = JSON.stringify({"name": name});
            stompClient.send("/app/message", {}, messageJson);
            setMessageInnerHTML("/user/stone/message 你发送的消息:" + name);
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }

        function closeWebSocket() {
            stompClient.disconnect(function () {
                setMessageInnerHTML("Websocket已关闭，下次见");
            });
        }


    </script>
</head>

<body>
Welcome<br/><input id="text" type="text" />
<button onclick="send()">发送消息</button>
<button onclick="subscribe1()">订阅消息/topic/topic</button>
<button onclick="subscribe2()">订阅消息/topic/queue</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<button onclick="open()">打开WebSocket连接</button>

<br/><input id="text2" type="text"/>
<button onclick="toStone()">发送给Stone的信息</button>

<hr/>
<div id="message"></div>
</body>




</html>